<template>
    <view class="popup">
      <u-popup v-model="show" :mask="true" :closeable='true'  mode="center" width="90%" border-radius="20" height="auto" @close="onClose">
			<view class="speccon">
				<view class="stxt">{{detail.name}}</view>
				<view class="slist" v-for="(item,index) in detail.spec" :key="index">
					<view class="stxt1">{{item.name}}</view>
					<view class="sitem">
						<view @tap="itembtn(index,index1)" :class="item1.checks?'spectxt':''" v-for="(item1,index1) in item.spec" :key="index1">
							<view>{{item1.name}}{{item1.checks}}</view>
							<view v-if="item1.price>0">￥{{item1.price}}</view>
						</view>
					</view>
				</view>
				<view class="zprice">
					<view>
						<span>总计</span><span>￥</span><span>19</span>
					</view>
					<view>+加入购物车</view>
				</view>
			</view>
      </u-popup>
    </view>
</template>

<script>
const app = getApp();
export default {
    data() {
        return {
            host: app.globalData.img_urls,
            img_src: app.globalData.img_src,
			show:true,
			cur:9999,
			cur1:9999
        };
    },
    /**
     * 组件的属性列表
     */
    props: {
        detail: {
            type: Object,
            default: ''
        }
    },
    /**
     * 组件的方法列表
     */
    methods: {
		itembtn(idx,idx1){
			var that = this;
			this.detail.spec[idx].spec[idx1].checks = !this.detail.spec[idx].spec[idx1].checks
		},
		itembtn1(idx){
			this.cur1 = idx
		},
		onClose(){
			this.show = false
			this.$emit('Colse', false);
		},
        attached: function () {
            const that = this;
            // 获取系统信息
            const systemInfo = uni.getSystemInfoSync();
            // 胶囊按钮位置信息
            const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
            // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
            this.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight,
            this.menuRight = systemInfo.screenWidth - menuButtonInfo.right,
            this.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight,
            this.menuHeight = menuButtonInfo.height
        },

    },
    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },
    created: function () {},
};
</script>
<style>
	.zprice>view:nth-child(2){
		width: auto;
		height: 60rpx;
		display: table;
		float: right;
		background: #FADD43;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		padding: 0px 20rpx;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		line-height:60rpx;
	}
	.zprice>view:nth-child(1)>span:nth-child(1){
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 24rpx;
		color: #3D3D3D;
	}
	.zprice>view:nth-child(1)>span:nth-child(2){
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 24rpx;
		color: #F95752;
		margin-left: 5px;
	}
	.zprice>view:nth-child(1)>span:nth-child(3){
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 500;
		font-size: 32rpx;
		color: #F95752;
	}
	.zprice>view:nth-child(1){
		width: auto;
		height: 60rpx;
		display: table;
		float: left;
		line-height: 60rpx;
	}
	.zprice{
		width: 100%;
		height: 60rpx;
		margin: 20rpx 0px;
		margin-bottom: 0px;
	}
	.spectxt{
		border: 1rpx solid #EEBA38 !important;
		background-color: #FFF8E6 !important;
	}
	.spectxt>view:nth-child(2){
		border-left: 1rpx solid #EEBA38 !important;
		color: #E5A70C !important;
	}
	.sitem>view>view:nth-child(2){
		border-left: 1rpx solid #D8D8D8;
	}
	.sitem>view>view:nth-child(2){
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #DE5C44;
	}
	.sitem>view>view:nth-child(1){
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 24rpx;
		color: #3D3D3D;
	}
	.sitem>view>view{
		width: auto;
		height: 60rpx;
		display: table;
		float: left;
		line-height: 60rpx;
		padding: 0px 10px;
	}
	.sitem>view{
		width: auto;
		height: 62rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 1rpx solid #D8D8D8;
		box-sizing: border-box;
		float: left;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.sitem{
		width: 100%;
		height: auto;
		display: table;
	}
	.stxt1{
		width: 100%;
		height: auto;
		display: table;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 26rpx;
		color: #3D3D3D;
		margin-bottom: 20rpx;
	}
	.slist{
		width: 100%;
		height: auto;
		display: table;
	}
	.stxt{
		width: 100%;
		height: auto;
		display: table;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 38rpx;
		color: #3D3D3D;
		margin-bottom: 30rpx;
	}
	.speccon{
		width: 100%;
		height: auto;
		display: table;
		box-sizing: border-box;
		padding: 20rpx 32rpx;
	}
</style>
